/*
 * 店铺肤质检测数据视图
 * @Author: ljb
 * @Date: 2018-04-23 09:31:20
 * @Last Modified by: ljb
 * @Last Modified time: 2018-09-27 11:12:24
 */
<style lang="less" rel="stylesheet/less" type="text/less">

    .v-store-skin-test-views {
		position: relative;
		// display: flex;
		// flex-direction: column;
		padding: 0 5px 5px 5px;
		background-color: #f0f0f0;
		overflow: auto;
		&::-webkit-scrollbar {
			display: none;
		}
		.user-lists {
			// height: 80%;
			margin-top: 10px;
			border-radius: 8px;
			background-color: #fff;
			padding: 15px 15px 10px 25px;
			/*修改iview的tabs的默认样式*/
			.ivu-tabs-content {
				align-items: flex-start;
			}
			/*修改iview的tabs的默认样式 END*/
			.tab-content {
				overflow-y: scroll;
				&::-webkit-scrollbar {
					display: none;
				}
				.user-index {
					padding: 0px 40px;
				}
				/*分页器外边距设置*/
				.pagination-block {
					margin: 20px 0;
				}
				/*分页器外边距设置 END*/

				/*hm饼图展示区域样式*/
				.pie-area {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					width: 80%;
					padding: 0 20px;
					margin: 0 auto;
					box-sizing: border-box;
					.pie-block {
						width: 49.4%;
						height: 250px;
						margin-bottom: 20px;
						background:rgba(255,255,255,1);
						border-radius: 5px;
						box-shadow: 0px 0px 15px 0px rgba(67,67,67,0.15);
					}
				}
				/*hm饼图展示区域样式 END*/
				/*wax饼图展示区域*/
				.pie-chart {
					width: 1050px;
					height: 522px;
					margin: 0 auto 20px;
					background:rgba(255,255,255,1);
					border-radius: 5px;
					box-shadow: 0px 0px 15px 0px rgba(67,67,67,0.15);
				}
				/*wax饼图展示区域 END*/
			}
		}

		/*用户详情组件的载体样式*/
		.user-detail {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			padding: 0 5px 5px 5px;
			z-index: 100;
			background-color: rgb(240, 240, 240);
			.return-btn {
				position: absolute;
				top: 17px;
				left: 22px;
				width: 60px;
				height: 42px;
				line-height: 42px;
				padding-left: 10px;
				z-index: 10;
				color: #fff;
				font-size: 28px;
				cursor: pointer;
			}
		}
		/*用户详情组件的载体样式 END*/
		/*没有测肤数据*/
		.no-touch-skin-test-data {
			text-align: center;
			position: relative;
			span {
				position: absolute;
				left: 40px;
				top: 20px;
				font-size: 18px;
			}
			img {
				width: 200px;
				height: 230px;
			}
			p {
				font-size: 16px;
				color: #97CAFF;
				position: absolute;
				bottom: 20px;
				left: 50%;
				transform: translate(-35%,0%);
			}
		}
		.no-img-skin-test-data {
			text-align: center;
			position: relative;
			span {
				position: absolute;
				left: 40px;
				top: 20px;
				font-size: 18px;
			}
			img {
				width: 360px;
				height: 500px;
			}
			p {
				font-size: 20px;
				color: #97CAFF;
				position: absolute;
				bottom: 90px;
				left: 50%;
				transform: translate(-35%,0%);
			}
		}
		.ivu-form-item-label {
			white-space: nowrap;
		}
	}

	/*用户列表弹框样式*/
	.user-modal {
		.user-content {
			padding: 14px 14px 0;
			box-sizing: border-box;
			.question-select {
				margin-bottom: 30px;
			}
		}
		.user-index {
			margin-bottom: 30px;
		}
		.ivu-modal-close {
			right: 30px;
			top: 15px;
		}
		.ivu-modal-header {
			padding: 20px 40px;
			.ivu-modal-header-inner {
				font-size: 18px;
				font-weight: 400;
			}
		}
	}
	/*用户列表弹框样式 END*/

</style>
<template>
	<div class="v-store-skin-test-views">

		<div v-show="!show_detail">
			<user-statistics :statistics-info="statistics_info"/>

			<Tabs
				v-model="current_tab"
				type="card"
				class="user-lists">

				<!-- 总计 -->
				<TabPane
					:label="$t('report.all_user')"
					class="tab-content"
					name="all">

					<user-search-form
						@search="confirmSearch"
						@export="confirmExcel"/>

					<div class="user-index">
						<userIndex
							:loading="table_loading"
							:wechat-users="all_wechat_users.data"
							@show="reportDetail"/>
					</div>

					<!-- 分页组件 -->
					<Row
						v-if="current_tab === 'all'"
						type="flex"
						justify="center"
						class="pagination-block">
						<Page
							:total="all_wechat_users.total"
							:current="all_wechat_users.current_page"
							:page-size="query_info.per_page"
							placement="top"
							show-sizer
							show-total
							@on-change="pageChange"
							@on-page-size-change="perPageChange"/>
					</Row>

				</TabPane>

				<!-- 智能测肤 -->
				<TabPane
					:label="$t('report.touch_test')"
					:style="{'maxHeight':tabPaneMaxHeight()}"
					class="tab-content"
					name="hm">

					<v-tab
						v-model="selected_hm_tab"
						:tabs="hm_tabs"/>

					<div class="pie-area">
						<div
							v-for="skin_test in hmTestData"
							:key="skin_test.position"
							class="pie-block">
							<pie-chart
								v-if="skin_test.label_counts && skin_test.label_counts.length > 0"
								:values="skin_test.label_counts"
								:unit-index="`hm_${skin_test.position}`"
								:series-name="`${hm_skin_position_map[skin_test.position]}`"
								:colors="computedPieChartColor(skin_test.position)"
								key-name="label"
								pie-type="hm"
								@click="pieClick($event,selected_hm_tab,skin_test.position)"/>
							<div
								v-else
								class="no-touch-skin-test-data">
								<span>{{ `${hm_skin_position_map[skin_test.position]}` }}</span>
								<img :src="no_skin_data_img">
								<p>{{ $t('common.no_data') }}</p>
							</div>
						</div>
					</div>

				</TabPane>

				<!-- 3D测肤 -->
				<TabPane
					:label="$t('report.image_test')"
					class="tab-content"
					name="wax">

					<v-tab
						v-model="selected_wax_tab"
						:tabs="wax_tabs"/>

					<div class="pie-chart">
						<pie-chart
							v-if="waxTestData.level_counts && waxTestData.level_counts.length > 0"
							:values="waxTestData.level_counts"
							:unit-index="`wax${selected_wax_tab}`"
							:series-name="`${wax_skin_test_map[selected_wax_tab]}`"
							key-name="level_name"
							pie-type="wax"
							@click="pieClick($event,'wax',selected_wax_tab)"/>
						<div
							v-else
							class="no-img-skin-test-data">
							<span>{{ `${wax_skin_test_map[selected_wax_tab]}` }}</span>
							<img :src="no_skin_data_img">
							<p>{{ $t('common.no_data') }}</p>
						</div>
					</div>

				</TabPane>

			</Tabs>
		</div>


		<!-- 饼图反查展示用户列表的弹框 -->
		<Modal
			v-model="user_list_modal"
			:title="$t('report.all_user')"
			class-name="vertical-middle-modal user-modal"
			width="1200">
			<div
				v-if="user_list_modal"
				class="user-content">
				<Select
					v-model="selected_question"
					class="v-mSelect question-select skin-detail-select"
					@on-change="changeQuestion">
					<Option
						v-for="question in question_lists"
						:value="question.value"
						:key="question.value"
						v-text="question.label"/>
				</Select>

				<div class="user-index">
					<userIndex
						:loading="table_loading"
						:wechat-users="userList.data"
						@show="reportDetail"/>
				</div>


				<!-- 分页组件 -->
				<Row
					type="flex"
					justify="center">
					<Page
						:total="userList.total"
						:current="userList.current_page"
						:page-size="query_info.per_page"
						placement="top"
						show-sizer
						show-total
						@on-change="pageChange"
						@on-page-size-change="perPageChange"/>
				</Row>

			</div>
			<div slot="footer"/>
		</Modal>

		<!-- 详情组件 -->
		<transition name="fadeL">
			<div
				v-if="show_detail"
				class="user-detail">

				<div
					class="return-btn"
					@click="destroyUserDetail">
					<Icon
						type="chevron-left"/>
				</div>

				<detail-views
					:skin-detail="skin_detail_data"/>
			</div>
		</transition>

	</div>
</template>

<script>

import API_LIST from 'src/API_LIST';

import { mapMutations, mapGetters } from 'vuex';

import qs from 'qs';

import { computedFormMaxHeight } from 'src/views/mixins/computedFormMaxHeight';

import { deleteEmptyValue } from 'src/utils/utils';

import userStatistics from 'src/views/component/skin-test/userStatistics';
import VTab from 'src/views/component/skin-test/v-tab';

import userIndex from './user-index';
import userSearchForm from './user-search-form';
import pieChart from './pie-chart';

import detailViews from './detail/views.vue';

// hm的测肤
// const Eye_TAIL = 1;		// 眼尾
// const FACE = 2;			// 脸颊
// const NECK = 3;			// 颈部
// const ARM = 4;			// 手臂

// wax的测肤
// const Sensitivity = 1;		// 皮肤敏感度
// const water = 2;			// 水分测试
// const oil = 3;			// 油脂测试
// const pore = 4;			// 毛孔清洁度
// const Pigment  = 5;			// 色素分解度

export default {
	name: 'SkinTest',
	components: {
		userIndex,
		userSearchForm,
		pieChart,
		detailViews,
		userStatistics,
		VTab,
	},
	mixins: [computedFormMaxHeight],
	data() {
		return {

			no_skin_data_img: require('src/assets/img/shuju_wushuju_icon.svg'),

			hm_skin_position_map: {
				1: this.$t('report.touch_position.eye'),
				2: this.$t('report.touch_position.face'),
				3: this.$t('report.touch_position.neck'),
				4: this.$t('report.touch_position.arm'),
			},						// hm测肤位置map

			wax_skin_test_map: {
				1: this.$t('report.image_position.sensitivity'),
				2: this.$t('report.image_position.water'),
				3: this.$t('report.image_position.oil'),
				4: this.$t('report.image_position.pore'),
				5: this.$t('report.image_position.pigment'),
			},						// wax测肤类型map

			current_tab: '',		// 当前选中的tab

			query_info: {

				page: 1,

				per_page: 10,

				keywords: '',

				has_skin_record: 1,

				born_at_start_time: '',

				born_at_end_time: '',

				sex: '',

				age_range: [],

				hm: '',

				wax: '',

				filter_hm: '',

				hm_label: '',

				hm_label_key: '',

				hm_position: '',

				filter_wax: '',

				wax_itemsid: '',

				wax_levelsort: '',

			},

			search_info: {

				page: 1,

				per_page: 10,

			}, // 分页信息

			pie_search_text: '',	// 饼图搜索条件的文字信息

			hm_skin: {},		// 智能测肤图表需要的数据

			wax_skin: {},		// 3D测肤图表需要的数据

			true_sort: [3, 2, 1, 5, 4], // 皮肤测试类型nav正确的排序

			appid: '',					// 公众号的appid

			table_loading: false,		// 表格的loading

			table_height: 580,

			hm_wechat_users: {},		// 智能测肤的用户列表

			wax_wechat_users: {},		// 3D测肤的用户列表

			all_wechat_users: {},		// 总用户列表

			per_page: {
				all: 10,
				hm: 10,
				wax: 10,
			}, // 每页条数

			statistics_info: {},	// 存储测肤人数统计信息

			hm_tabs: [
				{
					label: this.$t('report.water'),
					value: 'water',
				},
				{
					label: this.$t('report.oil'),
					value: 'oil',
				},
				{
					label: this.$t('report.elastic'),
					value: 'flex',
				},
			],		// hm测肤的分类tab

			wax_tabs: [
				{
					label: this.$t('report.image_position.oil'),
					value: '3',
				},
				{
					label: this.$t('report.image_position.water'),
					value: '2',
				},
				{
					label: this.$t('report.image_position.sensitivity'),
					value: '1',
				},
				{
					label: this.$t('report.image_position.pigment'),
					value: '5',
				},
				{
					label: this.$t('report.image_position.pore'),
					value: '4',
				},
			],		// wax测肤的分类tab

			hm_test_word_map: {
				water: 'water_counts',
				oil: 'oil_counts',
				flex: 'flex_counts',
			},

			hm_pie_chart_map: {
				water: {
					water_label_05: '#ff859d',	// 非皮肤数据
					water_label_10: '#8278E9',	// 皮肤干
					water_label_30: '#96BFFF',	// 水分不足
					water_label_40: '#61DEE2',	// 良好
					water_label_50: '#E7BCF2',	// 化妆品影响
					water_label_60: '#37A2DA',	// 皮外水分
				},
				oil: {
					oil_label_5: '#ff859d',		// 非皮肤数据
					oil_label_10: '#8278E9',	// 营养不良
					oil_label_15: '#96BFFF',	// 缺油
					oil_label_18: '#61DEE2',	// 良好
					oil_label_25: '#E7BCF2',	// 化妆品影响
					oil_label_30: '#37A2DA',	// 皮外油分
				},
				flex: {
					flex_label_1: '#8278E9',	// 松弛
					flex_label_3: '#96BFFF',	// 偏软
					flex_label_4: '#61DEE2',	// 良好
					flex_label_6: '#E7BCF2',	// 偏硬
					flex_label_8: '#37A2DA',	// 超硬
				},
			},				// hm饼图颜色map

			selected_hm_tab: '',	// 选中的智能测肤的tab

			selected_wax_tab: '',	// 选中的wax智能测肤的tab

			user_list_modal: false,	// 用户列表弹框的显隐控制

			question_lists: [],	// 用户测肤问题下拉选项

			selected_question: '',	// 选中的问题

			show_detail: false,	// 详情组件的加载和销毁

			has_modal_before_detail: false,	// 用于识别加载详情组件时是否存在用户列表弹框

			skin_detail_data: {}, // 肤质详情信息

		};
	},
	computed: {

		...mapGetters('userToken', [
			'getToken',
		]),

		// hm饼图所需数据
		hmTestData() {
			const current_hm = this.selected_hm_tab;

			return this.hm_skin[this.hm_test_word_map[current_hm]] || [];
		},

		// wax饼图所需数据
		waxTestData() {
			const current_wax = this.selected_wax_tab;

			const [current_wax_position] = this.wax_skin.item_level_counts ? this.wax_skin.item_level_counts.filter(wax => parseInt(wax.itemsid, 10) === parseInt(current_wax, 10)) : [];

			return current_wax_position || {};
		},

		// 饼图反查用户列表的数据
		userList() {
			const current_tab_value = this.current_tab;

			const key = `${current_tab_value}_wechat_users`;

			const user_index = this[key];

			return user_index;
		},

	},
	watch: {
		// 监听当前的tab切换，进行请求等操作
		current_tab() {
			this.resetSearchParam();

			const param = {
				keywords: '',
				has_skin_record: 1,
				born_dates: [],
			};

			switch (this.current_tab) {
			case 'hm':

				this.query_info.per_page = this.per_page.hm;
				this.query_info.hm = 1;
				this.selected_hm_tab = 'water';

				break;
			case 'wax':

				this.query_info.per_page = this.per_page.wax;
				this.query_info.wax = 1;
				this.selected_wax_tab = '3';

				break;

			default:
				this.query_info.per_page = this.per_page.all;

				this.confirmSearch(param);
				break;
			}
		},
	},
	created() {
		this.fetchUserStatistics();
	},
	mounted() {
		this.current_tab = 'all';
		this.fetchChartData();
	},
	methods: {

		...mapMutations('report', [
			'setUserInfos',
		]),

		...mapMutations('spinShow', [
			'showSpin',
			'closeSpin',
		]),

		/**
		 * 计算hm测肤饼图的颜色顺序
		 * @return {undefined}
		 */
		computedPieChartColor(position) {
			const current_hm = this.selected_hm_tab;

			const [current_hm_data] = this.hmTestData.filter(skin_test => skin_test.position === position);

			const hm_keys = current_hm_data.label_counts;

			const colors = [];

			hm_keys.forEach((hm_key) => {
				const hm_label_key = hm_key.label_key;

				const color = this.hm_pie_chart_map[current_hm][hm_label_key];

				colors.push(color);
			});

			return colors;
		},

		/**
		 * 导出excel表格
		 * @return {undefined}
		 */
		confirmExcel() {
			const param = {
				token: this.getToken,
			};
			window.open(`${API_LIST.STORE_EXPORT_USER_EXCEL}?${qs.stringify(param)}`);
		},

		/**
		 * 重置搜索参数
		 * @return {undefined}
		 */
		resetSearchParam() {
			this.query_info = {

				page: 1,

				per_page: 10,

				keywords: '',

				has_skin_record: 1,

				born_at_start_time: '',

				born_at_end_time: '',

				sex: '',

				age_range: [],

				hm: '',

				wax: '',

				filter_hm: '',

				hm_label: '',

				hm_label_key: '',

				hm_position: '',

				filter_wax: '',

				wax_itemsid: '',

				wax_levelsort: '',

			};

			this.search_info = {

				page: 1,

				per_page: 20,

			};
		},

		/**
		 * 饼图点击事件
		 * @param  {Object} params    {饼图点击返回的参数对象}
		 * @param  {String} test_type {点击的拼图属于的位置type，water、oil、flex、wax}
		 * @param  {Number} key       {测肤位置的值}
		 * @return {undefined}
		 */
		pieClick(params, test_type, position) {
			let click_area = {};

			switch (this.current_tab) {
			case 'hm': {
				const { name, seriesName } = params;

				const current_position_hm_data = this.hmTestData[String(position - 1)].label_counts;

				if (seriesName === `${this.hm_skin_position_map[String(position)]}`) {
					[click_area] = current_position_hm_data.filter(err => err.label === name);
				}


				switch (test_type) {
				case 'water': {
					this.pie_search_text = `${this.$t('report.water')}-${seriesName}-${name}`;

					break;
				}
				case 'oil': {
					this.pie_search_text = `${this.$t('report.oil')}-${seriesName}-${name}`;

					break;
				}
				default: {
					this.pie_search_text = `${this.$t('report.elastic')}-${seriesName}-${name}`;

					break;
				}
				}

				switch (test_type) {
				case 'water': {
					this.pie_search_text = `${this.$t('report.water')}-${seriesName}-${name}`;

					break;
				}
				case 'oil': {
					this.pie_search_text = `${this.$t('report.oil')}-${seriesName}-${name}`;

					break;
				}
				default: {
					this.pie_search_text = `${this.$t('report.elastic')}-${seriesName}-${name}`;

					break;
				}
				}

				this.query_info.filter_hm = 1;
				this.query_info.hm_label = test_type;
				this.query_info.hm_label_key = click_area.label_key;
				this.query_info.hm_position = position;

				this.createQuestionLists(current_position_hm_data, 'label_key', seriesName, 'label', click_area.label_key);

				break;
			}

			case 'wax': {
				const { name, seriesName } = params;

				const wax_test_data = this.waxTestData.level_counts;

				[click_area] = wax_test_data.filter(level => level.level_name === name);

				this.pie_search_text = `${seriesName}-${name}`;

				this.query_info.filter_wax = 1;
				this.query_info.wax_itemsid = click_area.itemsid;
				this.query_info.wax_levelsort = click_area.levelsort;

				this.createQuestionLists(wax_test_data, 'levelsort', seriesName, 'level_name', click_area.levelsort);

				break;
			}

			default:
				break;
			}

			this.search_info = JSON.parse(JSON.stringify(this.query_info));

			this.user_list_modal = true;
			this.fetchWechatUser(this.query_info);
		},

		/**
		 * 创建测试问题的下拉选项
		 * @param  {Array} arrs      {需要遍历的数组对象}
		 * @param  {String} real_val {需要取的value值}
		 * @param  {String} title {选项label前面的标题}
		 * @param  {String} sub_key {需要取得值的key}
		 * @param  {String} default_val {初始选项}
		 * @return {undefined}
		 */
		createQuestionLists(arrs, real_val, title, sub_key, default_val) {
			const new_arr = [];

			arrs.forEach((arr) => {
				const new_obj = {
					label: `${title}-${arr[sub_key]}`,
					value: arr[real_val],
				};

				new_arr.push(new_obj);
			});

			this.question_lists = new_arr;
			this.selected_question = default_val;
		},

		/**
		 * 改变选项时的回调
		 * @param  {String} value {选项的value值}
		 * @return {undefined}
		 */
		changeQuestion(value) {
			switch (this.current_tab) {
			case 'hm':

				this.query_info.hm_label_key = value;

				break;

			case 'wax':

				this.query_info.wax_levelsort = value;

				break;

			default:
				break;
			}

			this.fetchWechatUser(this.query_info);
		},

		/**
		 * 重置饼图反搜索参数
		 * @return {undefined}
		 */
		resetPieSearch() {
			this.query_info.filter_hm = '';
			this.query_info.hm_label = '';
			this.query_info.hm_label_key = '';
			this.query_info.hm_position = '';
			this.query_info.filter_wax = '';
			this.query_info.wax_itemsid = '';
			this.query_info.wax_levelsort = '';

			this.pie_search_text = '';

			this.search_info = JSON.parse(JSON.stringify(this.query_info));

			this.fetchWechatUser(this.query_info);
		},

		/**
         * 页码改变
         * @param  {string} pageNumber {当前页码}
         * @return {undefined}
         */
		pageChange(pageNumber) {
			this.search_info.page = pageNumber;

			this.search_info.per_page = this.query_info.per_page;

			this.fetchWechatUser(this.search_info);
		},

		/**
         * 每页显示数改变
         * @param  {string} per_page {当前每页显示数}
         * @return {undefined}
         */
		perPageChange(per_page) {
			this.search_info.per_page = per_page;

			this.query_info.per_page = per_page;

			switch (this.current_tab) {
			case 'hm':
				this.per_page.hm = per_page;

				break;
			case 'wax':
				this.per_page.wax = per_page;

				break;
			default:
				this.per_page.all = per_page;

				break;
			}

			this.fetchWechatUser(this.query_info);
		},

		/**
		* 确认搜索
		* @param  {string}  keyword {关键字}
		* @param  {Number}  has_skin_record {是否有肤质检测数据}
		* @param  {Array}  born_dates {出生日期区间}
		* @return {undefined}
		*/
		confirmSearch({
			keywords, sex, age_range,
		}) {
			this.query_info.keywords = keywords || '';

			this.query_info.sex = sex || '';

			this.query_info.age_range = age_range || [];

			this.search_info = JSON.parse(JSON.stringify(this.query_info));

			this.fetchWechatUser(this.query_info);
		},

		/**
		* 查看肤质数据详情
		* @param  {Object} row {查看的当前行对象}
		* @return {undefined}
		*/
		reportDetail(row) {
			const param = {
				appid: this.appid,
				openid: row.openid,
				id: row.id,
				name: row.nickname,
			};

			switch (this.current_tab) {
			case 'wax':

				param.has_data = 'wax';
				param.skin_detector_id = 2;

				break;

			default:

				param.has_data = 'hm';
				param.skin_detector_id = 3;

				break;
			}

			sessionStorage.setItem('watch_user_id', row.id);

			this.setUserInfos(param);

			this.$nextTick(() => {
				if (this.user_list_modal) {
					this.user_list_modal = false;
					this.has_modal_before_detail = true;
				}

				this.show_detail = true;

				this.skin_detail_data = row;
			});
		},

		/**
		 * 销毁详情组件
		 * @return {undefined}
		 */
		destroyUserDetail() {
			this.show_detail = false;
			if (this.has_modal_before_detail) {
				this.has_modal_before_detail = false;
				this.user_list_modal = true;
			}
		},

		/**
		 * 肤质检测数据图表
		 * @return {undefined}
		 */
		fetchChartData() {
			this.showSpin(this.$t('common.please_wait'));
			this.$http.get(API_LIST.STORE_SKIN_TEST_CHART)
				.then(({ data }) => {
					if (parseInt(data.code, 10) !== 0) throw new Error(data.error);

					this.hm_skin = data.hm_skin;
					this.wax_skin = data.wax_skin;
				})
				.catch((err) => {
					this.$Message.error(err.message || err.statusText);
				})
				.then(this.closeSpin);
		},

		/**
		 * 获取用户统计信息
		 * @return {undefined}
		 */
		fetchUserStatistics() {
			this.$http.get(API_LIST.STORE_USAGE_COUNT)
				.then(({ data }) => {
					if (parseInt(data.code, 10) !== 0) throw new Error(data.error);
					const res_data = data;
					delete res_data.code;
					this.statistics_info = res_data;
				})
				.catch((err) => {
					this.$Message.error(err.message || err.statusText);
				});
		},

		/**
         * 获取用户列表
         * @return {undefined}
         */
		fetchWechatUser(param) {
			this.table_loading = true;

			const query_str = qs.stringify(deleteEmptyValue(param));

			return this.$http.get(`${API_LIST.STORE_WECHAT_USER}?${query_str}`)
				.then(({ data }) => {
					if (parseInt(data.code, 10) !== 0) throw new Error(data.error);

					this.appid = data.appid;

					const key = `${this.current_tab}_wechat_users`;

					this[key] = data.wechat_users || {};
				})
				.catch((err) => {
					this.$Message.error(err.message || err.statusText);
				})
				.then(() => { this.table_loading = false; });
		},

	},
};
</script>
